<template>
    <el-dialog title="跟进客户" :visible="tDialogVisible" :before-close="closeTDialog">
        <el-form :model="newForm" :rules="tFormRules" ref="tForm" label-width="120px">
            <el-form-item prop="name" label="客户姓名">
                <el-input v-model="newForm.name" disabled/>
            </el-form-item>
            <el-form-item prop="time" label="跟进时间">
                <el-date-picker v-model="newForm.time" style="width: 100%" placeholder="请输入跟进时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item prop="traceDetails" label="跟进记录">
                <el-input v-model="newForm.traceDetails" placeholder="请输入跟进记录"></el-input>
            </el-form-item>
            <el-form-item label="营销方式">
                <el-select v-model="selectMktMode" style="width: 100%">
                    <el-option
                            v-for="mode in mktModes"
                            :label="mode.title"
                            :key="mode.id"
                            :value="mode.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="跟进结果">
                <el-select v-model="selectLevel" style="width: 100%">
                    <el-option
                            v-for="(mode, index) in resLevels"
                            :label="mode"
                            :key="index+1"
                            :value="index+1"
                    />
                </el-select>
            </el-form-item>
            <el-form-item prop="remark" label="备注">
                <el-input type="textarea" v-model="newForm.remark"></el-input>
            </el-form-item>
            <el-form-item label="跟进类型" v-if="editID">
                <el-select v-model="newForm.type" style="width: 100%">
                    <el-option
                            v-for="(mode, index) in ftypelists"
                            :label="mode"
                            :key="index"
                            :value="index"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
            <el-button type="primary" @click="saveDialog()">保存</el-button>
            <el-button @click="closeTDialog()">关闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {
        getSysDictionaryItemsApi,
        addTCustomerHistoryApi,
        updateTCustomerHistoryApi
    } from "@/request/api";

    export default {
        name: "traceCustDialog",
        props: ['tDialogVisible', 'tForm', 'editID'],
        data() {
            return {
                newForm: {},
                tFormRules: {
                    time: [
                        {required: true, message: '请输入跟进时间', trigger: 'blur'}
                    ],
                    traceDetails: [
                        {required: true, message: '请输入跟进记录', trigger: 'blur'}
                    ],
                },
                selectMktMode: null,
                mktModes: [],
                resLevels: ['差', '中', '优'],
                selectLevel: 3,
                ftypelists: ['潜在客户开发', '正式客户跟进']
            }
        },
        watch: {
            tForm(val) {
                if (!val) return
                this.$set(this, 'newForm', {...val});
            }
        },
        methods: {
            closeTDialog() {
                this.$refs['tForm'].resetFields()
                this.$emit('closeTDialog')
            },
            saveDialog() {
                this.$refs['tForm'].validate(vali => {
                    if (vali) {
                        const params = {
                            traceType: {
                                id: this.selectMktMode
                            },
                            traceTime: this.newForm.time,
                            traceDetails: this.newForm.traceDetails,
                            traceResult: this.selectLevel,
                            remark: this.newForm.remark
                        }
                        if (this.editID) {
                            params.customer = {
                                name: this.newForm.customer.name,
                                id: this.newForm.customer.id
                            }
                            params.id = this.newForm.id
                            params.type = this.newForm.type
                            updateTCustomerHistoryApi(params).then(res => {
                                if (res.success === true) {
                                    this.$refs['tForm'].resetFields()
                                    this.$emit('closeTDialog', true)
                                }
                            })
                        } else {
                            params.name = this.newForm.name,
                                params.customer = {
                                    id: this.newForm.id
                                }
                                addTCustomerHistoryApi(params).then(res => {
                                    if (res.success === true) {
                                        this.$refs['tForm'].resetFields()
                                        this.$emit('closeTDialog', true)
                                    }
                                })
                        }

                    } else {
                        return false
                    }
                })
            }
        },
        created() {
            getSysDictionaryItemsApi({
                currentPage: 1,
                pageSize: 10,
                parentId: 26
            }).then(res => {
                if (res.success === true) {
                    this.mktModes = res.data.list
                    this.selectMktMode = this.mktModes[0].id
                }
            })
        }
    }
</script>

<style scoped>

</style>